<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>OctoPrint Login</title>

    <link rel="shortcut icon" href="{{ url_for('static', filename='img/tentacle-32x32.png') }}">
    <link rel="mask-icon" href="{{ url_for('static', filename='img/mask.svg') }}" color="#56BE37">
    <link rel="mask-icon-theme" href="{{ url_for('static', filename='img/mask-theme.svg') }}" color="#56BE37">
    <link rel="apple-touch-icon" sizes="114x114" href="{{ url_for('static', filename='img/apple-touch-icon-114x114.png') }}">
    <link rel="apple-touch-icon" sizes="144x144" href="{{ url_for('static', filename='img/apple-touch-icon-144x144.png') }}">

    {% include "parts/forcelogin_css.jinja2" %}

    {% include "parts/forcelogin_javascripts.jinja2" %}
</head>
<body>
    <div class="container">
        <form class="form-signin">
            <h2 class="form-signin-heading">{{ _('Please log in') }}</h2>

            <div id="login-error" class="alert alert-error">{{ _('Incorrect username or password.') }}</div>
            <div id="login-offline" class="alert alert-error">{{ _('Server is currently offline.') }} <a id="login-reconnect" href="javascript:void(0)">{{ _('Reconnect...') }}</a></div>

            <input type="text" id="login-user" class="input-block-level" placeholder="{{ _('Username')|edq }}" autofocus>
            <input type="password" id="login-password" class="input-block-level" placeholder="{{ _('Password')|edq }}">
            <span class="pull-right"><small><a href="https://faq.octoprint.org/forgotten-password" id="login-forgotpassword" target="_blank" tabindex="-1">{{ _('Forgot password?') }}</a></small></span>
            <label class="checkbox">
                <input type="checkbox" id="login-remember"> {{ _('Remember me') }}
            </label>
            <button class="btn btn-block btn-large btn-primary" id="login-button" type="submit">{{ _('Log in') }}</button>
        </form>
    </div>

    <div id="login-overlay">
        <div class="background"></div>
        <div class="wrapper">
            <div class="outer">
                <div class="inner">
                    <div class="content">
                        <i class="fa fa-spinner fa-spin fa-4x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
